<template>
    <div class="add">
        <input type="text" v-model.trim="msg">
        <button @click="collectionAdd">添加</button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                msg:"",
            };
        },
        methods:{
            collectionAdd(){
                if(this.msg==""){
                    return;
                }else{
                    //将数据传递给app,完成添加动作
                    this.$emit("addItem", this.msg);
                    // 将input框内容清空
                    this.msg = "";
                }
            }
        },
    };
</script>

<style lang="scss" scoped>
    .add{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;

        input{
            height: 80px;
        }
    }
</style>